<template>
    <div class="search">
        <form action="/">
            <van-search
                shape="round"
                v-model="keyword"
                show-action
                placeholder="请输入商品关键词"
                @search="onSearch(keyword)"
                @cancel="onCancel"
            />
        </form>
        <div class="searchHistory">
            <div class="wordBox" v-for="item in historyList" @click="choseHistory(item)">
                {{ item }}
            </div>
        </div>
        <div class="title">热门搜索</div>
        <div class="hotSearch">
            <div class="wordBox" v-for="item in hotList" @click="choseHistory(item)">
                {{ item }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const route = useRoute();
const router = useRouter();
const store = useStore();
const historyList = store.state.history.historyList;
let keyword = ref('');
const hotList = ref(['玻璃杯', '夏装', '扫地']);
const onSearch = keyword => {
    store.commit('history/search', keyword);
    router.push('/list');
};
const onCancel = () => {
    router.push(route.query.redirct);
};
const choseHistory = item => {
    keyword.value = item;
    onSearch(keyword);
};
</script>

<style lang="scss" scoped>
@import '../style/base.scss';
.search {
    .searchHistory {
        width: 100%;
        @include flexSet(flex-start, space-evenly, space-evenly);
        .wordBox {
            margin: 0 0.2rem;
            padding: 0.06rem;
            height: 0.12rem;
            line-height: 0.12rem;
            border-radius: 0.3rem;
            background-color: #f1f1f1;
            color: #9e9e9e;
            font-size: 0.12rem;
        }
    }
    .title {
        width: 0.8rem;
        margin: 0.2rem;
        height: 0.2rem;
        line-height: 0.16rem;
        font-size: 0.16rem;
        font-weight: bold;
    }
    .hotSearch {
        width: 100%;
        @include flexSet(flex-start, space-evenly, space-evenly);
        .wordBox {
            margin: 0 0.2rem;
            padding: 0.06rem;
            height: 0.12rem;
            line-height: 0.12rem;
            border-radius: 0.3rem;
            background-color: #f1f1f1;
            color: #9e9e9e;
            font-size: 0.12rem;
        }
    }
}
</style>
